<script setup>
import { ref, onMounted, getCurrentInstance } from 'vue'
import { timeAgo, subAddress, math18, subTx } from '@/utils/util'
// import { useRouter } from 'vue-router'

// const router = useRouter()
const { proxy } = getCurrentInstance()

const blocksList = ref([])
const transactionsList = ref([])

const loadingbk = ref(true)
const loadingtx = ref(true)

onMounted(() => {
  // alert(2)
  // alert(router.meta.isBack)
  let Blist = localStorage.getItem('blocksList')
  let tlist = localStorage.getItem('transactionsList')
  if (tlist) {
    loadingtx.value = false
    transactionsList.value = JSON.parse(tlist)
  }
  if (Blist) {
    loadingbk.value = false
    blocksList.value = JSON.parse(Blist)
  }


  getBlocks()
  getTransactions()
})




const getTransactions = () => {
  var url = "/api/Scan/Transactions"
  var param = {
    "pageNo": 1,
    "pageSize": 10,
    "address": ""
  }
  proxy.$axios.post(url, param).then((res) => {
    setTimeout(() => {
      loadingtx.value = false
    }, 500)
    if (res.code == "Success") {
      transactionsList.value = res.data.list
      localStorage.setItem('transactionsList', JSON.stringify(res.data.list))
    }
  })
}
const getBlocks = () => {
  var url = "/api/Scan/Blocks"
  var param = {
    "pageNo": 1,
    "pageSize": 10
  }
  proxy.$axios.post(url, param).then((res) => {
    setTimeout(() => {
      loadingbk.value = false
    }, 500)

    // console.log(res)
    let arr = []
    if (res.code == "Success") {
      res.data.list.forEach((element, i) => {
        if (i !== res.data.list.length - 1) {
          arr.push({ ...element, ts1: res.data.list[i + 1].ts })
        }
      });
      blocksList.value = arr;
      localStorage.setItem('blocksList', JSON.stringify(arr))
    }
  })
}

</script>

<template>
  <div class="container tok_list">
    <keep-alive>
      <el-row :gutter="20">
        <el-col :md="12" :sm="24">
          <div class="box_card">
            <h3>Latest Blocks</h3>
            <div class="card_warp">
              <el-skeleton :rows="5" :loading="loadingbk" animated>
                <el-row v-for="(item, i) in blocksList" :key="i" justify="space-between">
                  <el-col :sm=16 class="left">
                    <div class="pd_right">
                      <img src="@/assets/img/blocks.svg">
                      <div>
                        <router-link :to="'/block/' + item.blockNumber">{{ item.blockNumber
                        }}</router-link>
                        <p>{{ timeAgo(item.ts) }}</p>
                      </div>
                    </div>
                    <div class="d-flex">
                      <div class="text-nowrap">
                        <p class="p1">Miner
                          <el-tooltip :hide-after="0" :content="item.miner" placement="top">
                            <router-link :to="'/address/' + item.miner" title="">
                              <span>{{ subAddress(item.miner) }}</span>
                            </router-link>
                          </el-tooltip>

                        </p>
                        <p>
                          <el-tooltip :hide-after="0" content="Transactions in this Block" placement="top">
                            <router-link v-if="item.txs > 0" :to="{ path: '/txs', query: { block: item.blockNumber } }">
                              {{ item.txs }} txns
                            </router-link>
                          </el-tooltip>
                          <span v-if="!item.txs">{{ item.txs }} txns</span>
                          <i> in {{ timeAgo(item.ts1, item.ts, true) }}</i>
                        </p>
                      </div>
                    </div>

                  </el-col>
                  <el-col :sm=8 class="right">
                    <div class="d-flex">
                      <el-tooltip :hide-after="0" content="Block Reward" placement="top">
                        <span>0 TOK</span>
                      </el-tooltip>

                    </div>
                  </el-col>
                </el-row>
              </el-skeleton>
            </div>
            <div class="card_footer" v-if="!loadingbk">
              <button>
                <RouterLink to="/blocks">View All Blocks</RouterLink>
              </button>
            </div>
          </div>

        </el-col>
        <el-col :md="12" :sm="24">
          <div class="box_card">
            <h3>Latest Transactions</h3>
            <div class="card_warp">
              <el-skeleton :rows="5" :loading="loadingtx" animated>
                <el-row v-for="(item, i) in transactionsList" :key="i" justify="space-between">
                  <el-col :sm=16 class="left">
                    <div class="pd_right">
                      <img src="@/assets/img/blocks.svg">
                      <div>
                        <router-link :to="'/tx/' + item.hash">{{ subTx(item.hash)
                        }}</router-link>
                        <p>{{ timeAgo(item.ts) }}</p>
                      </div>
                    </div>
                    <div class="d-flex">
                      <div class="text-nowrap">
                        <p>From
                          <el-tooltip :hide-after="0" :content="item.from" placement="top">
                            <router-link :to="'/address/' + item.from">{{ subAddress(item.from) }}</router-link>
                          </el-tooltip>
                        </p>
                        <p>To
                          <el-tooltip :hide-after="0" :content="item.to" placement="top">
                            <router-link class="p_none" :to="'/address/' + item.to">{{ subAddress(item.to)
                            }}</router-link>
                          </el-tooltip>

                        </p>
                      </div>
                    </div>

                  </el-col>
                  <el-col :sm=8 class="right">
                    <div class="d-flex">
                      <el-tooltip :hide-after="0" content="Amount" placement="top">
                        <span>
                          {{ math18(item.value) }} TOK
                        </span>
                      </el-tooltip>

                    </div>
                  </el-col>
                </el-row>
              </el-skeleton>
            </div>
            <div class="card_footer" v-if="!loadingbk">
              <button>
                <RouterLink to="/txs">View all Transactions</RouterLink>
              </button>
            </div>
          </div>
        </el-col>
      </el-row>
    </keep-alive>
  </div>
</template>

<style lang="less" scoped>
.tok_list {
  padding-bottom: 100px;
}

.box_card {
  margin-top: 25px;

  h3 {
    padding: 15px 20px;
    font-size: 1rem;
    font-family: var(--font-medium);
    border-bottom: 1px solid var(--color-border);
  }

  .card_warp::-webkit-scrollbar {
    width: 4px;
  }

  .card_warp::-webkit-scrollbar-thumb {
    border-radius: 2px;
    background-color: #fff;
  }

  .card_warp {
    height: 500px;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 20px 17px 20px 20px;

    .el-row {
      margin-bottom: 18px;
      padding: 15px;
      border-radius: 6px;
      background: #F8F9FA;

      &:nth-last-child(1) {
        margin: 0;
      }
    }

    .left {
      .pd_right {
        display: flex;
      }

      display: flex;
      align-items: center;
      padding:0;
      justify-content: space-between;

      img {
        margin-right: 10px;
        width: 46px;
      }

      a {
        font-size: 0.85rem;
        max-width: 125px;
        line-height: 24px;
        display: inline-block;
      }

      p {
        color: #77838f;
        line-height: 24px;
        font-size: 0.8rem;
      }

      .p1 {
        a {
          display: inline-block;
          max-width: 10em;
          padding: 0 .1rem;
        }
      }
    }

    .right {
      .d-flex {
        line-height: 45px;
        text-align: right;

        // display: flex;justify-content: space-between;align-items: center;
        // padding-left: 20px;
        .text-nowrap {
          p {
            display: flex;
            align-items: center;
          }

          white-space: nowrap;
          font-size: 14px;

          i {
            color: #666;
            font-size: 1rem;
          }
        }

        a {
          font-size: 1.4rem;
          max-width: 125px;
          display: inline-block;
          padding: 0 5px;
        }

        .p_none {
          padding-left: 0;
        }


        span {
          color: var(--color-text);
          padding: 4px 8px;
          border: 1px solid #ddd;
          border-radius: 5px;
          font-size: 0.75rem;
        }


      }
    }

    &:hover {
      &::-webkit-scrollbar-thumb {
        background: #ddd;
      }
    }

  }
}

.card_footer {
  border-top: 1px solid #e7eaf3;
  padding: 10px 15px;

  button {
    width: 100%;
    background: #eaf4fb;
    color: var(--prmary-color);
    border-radius: 5px;
    font-size: 16px;
    transition: .5s;

    a {
      display: block;
      padding: 15px 0;
      color: #333;
      font-family: 'FormaDJRDisplay-Medium';
    }

    &:hover {
      background: #e7faff;
      // a {
      //   color: #fff;
      //   display: block;
      // }
    }

  }
}

@media (max-width:1000px) {
  .box_card {
    .card_warp {
      padding: 10px 10px 7px 10px;

      .el-row {
        padding: 10px;
      }
    }
  }
}
</style>
